<!--根组件,用来装所有的组件,比如登录或者admin后台-->


<template>
    <!-- 通常编写组件的html结构，注意vue2.0中一定要有一个根元素 -->
    <div class="tmpl">
        <!-- 头部和菜单栏 -->
        <div id="header" class="header">
            <div class="head-top">
                <div class="section">
                    <div class="left-box">
                        <span>vue2.0单页应用{{islog}}</span>
                        <a target="_blank" href="#"></a>
                        <a target="_blank" href="#"></a>
                    </div>
                    <div id="menu" class="right-box">
                        <span v-if='!islog'>
                            <router-link to="/site/login"> 登录</router-link>
                            <a href="javascript:;"> 注册</a>
                        </span>
                        <span v-if='islog'>
                            
                            <router-link to="/site/vip/center">会员中心</router-link>
                            <a href="javascript:;" @click='loginout'>退出</a>
                        </span>
                        <strong>|</strong>
                        <!--<a href="/content/contact.html"><i class="iconfont icon-phone"></i>联系我们</a>-->
                        <router-link to="/site/car">
                            <i class="iconfont icon-cart"></i>购物车(
                            <span id="shoppingCartCount">{{count}}</span>)
                        </router-link>
                    </div>
                </div>
            </div>
            <div class="head-nav">
                <div class="section">
                    <!-- <div class="logo">
                                       <a href="/index.html"><img width="230px" height="70px" src="/templates/main/images/logo.png" /></a>
                                   </div>-->
                    <div id="menu2" class="nav-box menuhd">
                        <ul>
                            <li class="index">
                                <router-link to="/site/goodslist">
                                    首页
                                </router-link>
                            </li>
                            <li class="news">
                                <a href="/news.html">
                                    学员问题汇总
                                </a>
                            </li>
                            <li class="photo">
                                <a href="/photo.html">
                                    重难点专区
                                </a>
                            </li>
                            <!--<li class="goods"><a href="">就业阶段</a></li>-->
                            <li class="video">
                                <a href="/video.html">
                                    前端常用功能
                                </a>
                            </li>
                            <li class="down">
                                <a href="/down.html">
                                    资源下载
                                </a>
                            </li>
                            <li>
                                <router-link to="/site/goodslist">
                                    购物商城
                                </router-link>
                            </li>
                        </ul>
                    </div>
                    <div class="search-box">
                        <div class="input-box">
                            <input id="keywords" name="keywords" type="text" onkeydown="if(event.keyCode==13){SiteSearch('/search.html', '#keywords');return false};"
                                placeholder="输入关健字" x-webkit-speech="">
                        </div>
                        <a href="javascript:;" onclick="SiteSearch('/search.html', '#keywords');">
                            <i class="iconfont icon-search"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>


        <!-- 占位 -->
        <router-view></router-view>
    </div>
</template>

<script>
    // 导航栏jq效果
    $(document).ready(function() {
        $("#menu2 li a").wrapInner('<span class="out"></span>');
        $("#menu2 li a").each(function() {
            $('<span class="over">' + $(this).text() + '</span>').appendTo(this);
        });

        $("#menu2 li a").hover(function() {
            $(".out", this).stop().animate({
                'top': '48px'
            }, 300); // move down - hide
            $(".over", this).stop().animate({
                'top': '0px'
            }, 300); // move down - show

        }, function() {
            $(".out", this).stop().animate({
                'top': '0px'
            }, 300); // move up - show
            $(".over", this).stop().animate({
                'top': '-48px'
            }, 300); // move up - hide
        });

    });


    // 导入kits帮助类的vm.js组件
    import {
        vm,
        key
    } from './kits/vm.js';

    // 导入local本地帮助类
    import {
        setItem,
        getItem
    } from './kits/localStrone.js';



    // es6的export default{ 写法等同于 module.exports={
    export default {
        // es6的写法 data() 等同于es5的 data:function()
        data() {
            return {
                count: 0, //购物车存储的种类
                countArr: [],
                islog: this.islog = localStorage.getItem('islogin') == 'false' ? false : true, //存储用户是否登录,如果登录,右上角显示会员中心和退出,否则显示登录和注册
            }
        },
        // watch: {
        //     fullname() {
        //         this.count = this.countArr.length;
        //     }
        // },
        created() {
            // setItem('{}');
            var obj = getItem();
            for (var key in obj) {
                this.countArr.push(obj[key]);
            }
            this.count = this.countArr.length;
            this.countArr = [];
        },
        mounted() {
            // // 在组件 B 创建的钩子中监听事件 ,加入购物车触发,删除购物车的时候,也触发

            vm.$on(key, (obj) => {


                for (var key in obj) {
                    this.countArr.push(obj[key]);
                }
                console.log(obj);
                this.count = this.countArr.length;
                this.countArr = [];
            });

            // 调用判断用户是否登录
            // 在组件 B 创建的钩子中监听事件
            vm.$on('ilogin', (bool) => {
                localStorage.setItem('islogin', bool);
                this.islog = localStorage.getItem('islogin') == 'false' ? false : true;
            })

        },
        methods: {
            // 判断用户是否登录
            islogin() {
                var url = '/site/account/islogin';
                this.$http.get(url).then(res => {
                    if (res.data.code == 'nologin') {
                        localStorage.setItem('islogin', false);
                        this.islog = localStorage.getItem('islogin') == 'false' ? false : true;
                    } else {
                        // 登录过了
                        localStorage.setItem('islogin', true);
                        this.islog = localStorage.getItem('islogin') == 'false' ? false : true;
                    }

                })
            },
            loginout() { //点击退出用户登录
                var url = '/site/account/logout';
                this.$http.get(url).then(res => {
                    if (res.data.status == 1) {
                        return this.$message.error(res.data.message);
                    }
                    // 正常退出
                    localStorage.setItem('islogin', false);
                    this.islog = localStorage.getItem('islogin') == 'false' ? false : true;
                    alert(this.islog);
                    this.$message.success(res.data.message);
                })
            }
        }
    }
</script>

<style>
    /* 导入css全局样式 */
    
    @import url('../../../statics/elementuiCss/index.css');
</style>


<!--
<style></style>  中的样式是全局的
<style scoped></style> 中的样式是当前组件的

-->